<template>
	<view class="container">
		<navigationBar :myProperty="propertyInfo"></navigationBar>
		<view class="container" :style="{backgroundImage:'url('+ml_introduce_bg+')'}"
			style="background-size: 100% 100%;height: 1624rpx;">
			<!-- 弹幕 -->
			<view style="position: relative;z-index: 999;">
				<!-- 固定区域 -->
				<view class="fixed-area">
					<!-- 动态生成的图片 -->
					<view v-for="(item, index) in showImages" :key="index" class="image-container" :style="{
				          left: item.left + 'px',
				          top: item.top + 'px',
				          opacity: item.opacity,
				          transform: `scale(${item.scale})`,
				          'z-index': item.zIndex
				        }">
						<image :src="item.src" mode="heightFix" class="random-image" />
					</view>
				</view>
			</view>
			<image :src="ml_introduce_next" mode="" class="ml-next" @click="next"></image>
			<view class="tip-1 flex-cc">{{'3秒下单立享「能量加持仪式」！\n考前/面试/表白前急用必拍！'}}</view>
			<view class="tip-2 flex-cc">脉轮平衡｜天然能量｜消磁净化｜专属定制</view>
			<image :src="yunshi" mode="" class="yun-shi"></image>
		</view>
		<image :src="intro_shop" mode="" style="width: 100%;height: 3991rpx;display: block;position: relative;margin-top: -80rpx;"></image>
	</view>
</template>

<script>
	import {
		chakraSclInfo
	} from '@/common/api/scl_api.js'
	export default {
		data() {
			return {
				ml_introduce_bg: this.$imgWxkjUrl + '/product/ml_introduce_bg_new_new.png',
				ml_introduce_next: this.$imgWxkjUrl + '/product/ml_introduce_next_new.png',
				yunshi: this.$imgWxkjUrl + '/product/yunshi.png',
				intro_shop: this.$imgWxkjUrl + '/product/intro_shop.png',
				propertyInfo: {
					"bg_color": "transparent",
					"color": "#333",
					"flag": 1,
					"name": "",
					"hasEntity": false,
				},
				sclId: '',
				shareData: {
					title: '定制我的脉轮水晶',
					path: '/pages/index/index?userType=mailun',
					imageUrl: this.$imgWxkjUrl + '/product/mailun_share_new_new.png'
				},
				isBeforePay: '',
				// 所有37张图片的路径（请替换为您的实际图片路径）
				allImages: Array.from({
					length: 37
				}, (_, i) => this.$imgWxkjUrl + `/product/dmNew/${(i+1)}.png`),
				// 当前显示的图片数组
				showImages: [],
				// 定时器
				timer: null,
				zIndex: 1,
				randomIndex: -1,
				preTop: 0,
				randomArea: [{
						left: 0,
						top: 0
					},
					{
						left: 0,
						top: 240
					},
					{
						left: 120,
						top: 250
					},
					{
						left: 130,
						top: 0
					},
					{
						left: 80,
						top: 130
					}
				],
				flagNum: 3
			}
		},
		onLoad(options) {
			if (options.sclId) {
				this.sclId = options.sclId
			} else {
				chakraSclInfo().then(res => {
					res = res.data;
					this.sclId = res.data.sclId
				})
			}
			this.isBeforePay = options.isBeforePay
			this.startAnimation()
		},
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer)
			}
		},
		methods: {
			getRandomNumber(min, max) {
				return Math.floor(Math.random() * (max - min + 1)) + min;
			},
			getRandomWithGap(previousValue, min = 1, max = 300, gap = 100) {
				let newValue;
				do {
					newValue = Math.floor(Math.random() * (max - min + 1)) + min;
				} while (Math.abs(newValue - previousValue) < gap);
				return newValue;
			},
			// 获取随机位置（考虑图片大小）
			getRandomPosition() {
				// const fixedWidth = 375 // 固定区域宽度
				// const fixedHeight = 500 // 固定区域高度
				// const imgSize = 200 // 图片基础大小

				// if (this.preTop) {
				// 	this.preTop = this.getRandomWithGap(this.preTop)
				// } else {
				// 	this.preTop = 200;
				// }

				let left, top;
				if (this.flagNum < 4) {
					this.flagNum++
				} else {
					this.flagNum = 0
				}
				let numIndex = this.flagNum;
				if (this.randomIndex == 27) {
					numIndex = 1
				}
				let addNum = 50;
				if (numIndex == 0 || numIndex == 1) {
					addNum = 20
				} else if (numIndex == 2 || numIndex == 3) {
					addNum = 80
				}
				let minLeft = this.randomArea[numIndex].left;
				let maxLeft = this.randomArea[numIndex].left + addNum;
				let minTop = this.randomArea[numIndex].top;
				let maxTop = this.randomArea[numIndex].top + addNum;

				left = this.getRandomNumber(minLeft, maxLeft);
				top = this.getRandomNumber(minTop, maxTop);

				//  else if (this.flagNum == 5) {
				// 	left = this.getRandomNumber(10, 60);
				// 	top = this.getRandomNumber(0, 50);
				// 	this.flagNum = 6
				// }else if (this.flagNum == 6) {
				// 	left = this.getRandomNumber(100, 150);
				// 	top = this.getRandomNumber(200, 240);
				// 	this.flagNum = 0
				// }
				return {
					left: left,
					top: top
				}
				// return {
				// 	left: Math.random() * (this.randomIndex == 27 ? (fixedWidth - 300) : (fixedWidth - imgSize)),
				// 	top: this.preTop
				// }
			},
			// 获取随机缩放比例
			getRandomScale() {
				return 0.7 + Math.random() * 0.5 // 缩放范围0.5-1.3
			},

			// 添加新图片
			addNewImage() {
				// 随机选择一张图片
				// const randomIndex = Math.floor(Math.random() * this.allImages.length)
				if (this.randomIndex > this.allImages.length - 1) {
					this.randomIndex = -1;
				}
				this.randomIndex++;
				const newImage = {
					src: this.allImages[this.randomIndex],
					opacity: 0,
					scale: this.getRandomScale(),
					zIndex: this.zIndex++,
					...this.getRandomPosition()
				}

				// 添加到显示数组
				this.showImages.push(newImage)

				// 渐现动画
				setTimeout(() => {
					newImage.opacity = 1
				}, 300)

				// 2秒后渐隐并移除
				setTimeout(() => {
					newImage.opacity = 0
					// setTimeout(() => {
					// 	this.showImages = this.showImages.filter(img => img !== newImage)
					// }, 800) // 渐隐动画时间
				}, 6000)
			},

			// 开始动画循环
			startAnimation() {
				// 每秒添加一张新图片
				this.timer = setInterval(() => {
					this.addNewImage()
				}, 1300)
			},
			goNext() {
				uni.navigateTo({
					url: '/subcontractorMaiLun/pages/startMaiLun/startMaiLun?sclId=' + this.sclId
				})
			},
			next() {
				if (this.$fangBaoClick()) return
				let that = this;
				if (this.isBeforePay) {
					this.$u.api.orderPay({
						orderType: 18,
						sourseType: '31'
					}).then(res => {
						if (res.data.code == 200) {
							uni.requestPayment({
								provider: 'wxpay',
								service: 5,
								orderInfo: res.data.data.wr,
								timeStamp: res.data.data.wr.timeStamp,
								nonceStr: res.data.data.wr.nonceStr,
								package: res.data.data.wr.packageValue,
								signType: res.data.data.wr.signType,
								paySign: res.data.data.wr.paySign,
								success(res) {
									that.goNext();
								},
								fail(err) {
									that.$showToast('支付取消');
								}
							});
						} else {
							that.$showToast(res.data.message);
						}
					})
				} else {
					that.goNext();
				}
			}
		}
	}
</script>

<style>
	.fixed-area {
		position: absolute;
		left: 0;
		top: 500rpx;
		width: 100%;
		height: 800rpx;
		overflow: hidden;
	}

	.image-container {
		position: absolute;
		width: 100px;
		height: 100px;
		transition: all 0.5s ease;
	}

	.random-image {
		height: 168rpx;
	}

	.yun-shi {
		width: 482rpx;
		height: 482rpx;
		display: block;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 540rpx;
		animation: float 3s ease-in-out infinite;
	}

	@keyframes float {

		0%,
		100% {
			transform: translate(-50%, 0);
		}

		50% {
			transform: translate(-50%, -15px);
		}
	}

	.tip-1 {
		width: 385rpx;
		font-size: 24rpx;
		color: #723F60;
		line-height: 33rpx;
		letter-spacing: 2rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 147rpx;
		word-break: break-all;
		white-space: pre-wrap;
	}

	.tip-2 {
		width: 656rpx;
		height: 63rpx;
		background: rgba(235, 235, 235, 0.53);
		border-radius: 32rpx;
		font-size: 28rpx;
		color: #552E73;
		letter-spacing: 2rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 68rpx;
	}

	.ml-next {
		width: 490rpx;
		height: 144rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 220rpx;
	}
</style>